var home_page = 1;//首页
var curr_page = 1;//当前页
var last_page = 10;//尾页
var yema_num = 6;//页码数
var page_row = 1;//每页的条数
var count_page = 0;//总页数
var count_row = 0;//总条数
var left_page = 1;//最左端页码值
var right_page = 6;//最右端页码值

//【上一页】按钮点击js函数
function page_up() {
    if (curr_page == home_page) {  //当当前页等于首页时
        alert("已经是第一页了！");
    } else if (left_page == curr_page) {
        page_up_yemachange();    //当最左端页码值等于当前页时执行page_up_yemachange()改页函数
    } else {   //正常跳转页码
        document.getElementsByName("page")[(curr_page - left_page + 1)].style.color = "#ccc"; //改变当前页页码按钮字体颜色为白色
        document.getElementsByName("page")[(curr_page - left_page)].style.color = "white"; //改变当前页的上一页页码按钮字体颜色为蓝色
        document.getElementsByName("page")[(curr_page - left_page + 1)].style.background = "white"; //改变当前页页码按钮背景颜色为白色
        document.getElementsByName("page")[(curr_page - left_page)].style.background = "#16dcb8"; //改变当前页的上一页页码按钮背景颜色为蓝色
        curr_page--; //全局当前页变量自减一
        if (left_page == home_page) { //判断最左端页码值是否为首页页码值
            document.getElementsByName("dot")[0].style.display = "none"; //将左侧...省略页码按钮隐藏
        }
        if (right_page != last_page) { //判断最右端页码值是否不是最后一页页码值
            document.getElementsByName("dot")[1].style.display = ""; //将右侧...省略页码按钮显示出来
        }
    }
}
//【下一页】按钮点击js函数 （这里可结合上一页js点击函数进行对比，过程原理是一样的，作者不在赘述）
function page_down() {
    if (curr_page == last_page) { alert("已经是最后一页了！"); }
    else if (curr_page == right_page) {
        page_down_yemachange();
    } else {
        document.getElementsByName("page")[(curr_page - left_page + 1)].style.color = "#ccc";
        document.getElementsByName("page")[(curr_page - left_page + 2)].style.color = "white";
        document.getElementsByName("page")[(curr_page - left_page + 1)].style.background = "white";
        document.getElementsByName("page")[(curr_page - left_page + 2)].style.background = "#16dcb8";
        curr_page++;
        if (right_page == last_page) {
            document.getElementsByName("dot")[1].style.display = "none";
        }
        if (left_page != home_page) {
            document.getElementsByName("dot")[0].style.display = "";
        }
    }
}
//上一页页码改页函数
function page_up_yemachange() {
    var i = 1; for (i; i <= yema_num; i++) { //遍历页码进行更改页码数值
        document.getElementsByName("page")[i].innerHTML = (curr_page - 2 + i);
    }
    curr_page--; //当前页变量自减一
    left_page = curr_page; //修改最左端页码值为当前页
    right_page = left_page + yema_num - 1; //修改最右端页码值
    if (left_page == home_page) { //判断最左端页码值是否为首页页码值
        document.getElementsByName("dot")[0].style.display = "none";
    }
    if (right_page != last_page) {  //判断最右端页码值是否不是最后一页页码值
        document.getElementsByName("dot")[1].style.display = "";
    }
}
//下一页页码改页函数 （这里和上一页页码改页函数原理一样，作者不再赘述）
function page_down_yemachange() {
    var i = yema_num; for (i; i >= 1; i--) { document.getElementsByName("page")[i].innerHTML = (curr_page + i - yema_num + 1); }
    curr_page++;
    right_page = curr_page;
    left_page = right_page - yema_num + 1;
    if (right_page == last_page) { document.getElementsByName("dot")[1].style.display = "none"; }
    if (left_page != home_page) { document.getElementsByName("dot")[0].style.display = ""; }
}
//页码函数
function yema(e) { //获取点击页码对象e
    document.getElementsByName("page")[(curr_page - left_page + 1)].style.color = "#ccc"; //更改当前页页码按钮的字体颜色为白色
    document.getElementsByName("page")[(curr_page - left_page + 1)].style.background = "white"; //更改当前页页码按钮的字体颜色为白色
    e.style.color = "white"; //更改点击页码按钮对象的字体颜色为蓝色
    e.style.background = "#16dcb8"; //更改点击页码按钮对象的字体颜色为蓝色
    curr_page = parseInt(e.innerHTML);
}//更改当前页变量为点击页码对象的页码值}
// var ofooter = document.getElementsByTagName('footer')[0];
// var op = ofooter.getElementsByTagName('p')[0];
// var oinput = op.getElementsByTagName('input')[0];
// var obutton = op.getElementsByTagName('button')[0];
// var obuttonal = document.getElementsByClassName('ooo');
// obutton.onclick = function(){
//         if(oinput.value != ''){
//         curr_page =oinput.value-1;
//         for(var i=0;i<obuttonal.length;i++){
//             obuttonal[i].style.color = "#ccc";
//             obuttonal[i].style.background = "white";
//         }
//         obuttonal[curr_page].style.color = "white";
//         obuttonal[curr_page].style.background = "#16dcb8";
//         }
//     }
/**
 * <div class="fenye">
        <!-- <button style="color:aqua" class="one" type="button" value="home_page"><</button> -->
        <button class="two" onClick="page_up();" type="button" value="page_up"><</button>
        <button name="dot" style="display: none;" class="three"  type="button" value="...">...</button>
        <button name="page" style="display: none;" class="three" type="button" value="0" >0</button>
        <button onClick="yema(this);" name="page" style="color:#fff;background: #16dcb8" class="three" type="button" value="1">1</button>
        <button onClick="yema(this);" name="page" class="three" type="button" value="2">2</button>
        <button onClick="yema(this);" name="page" class="three" type="button" value="3">3</button>
        <button onClick="yema(this);" name="page" class="three" type="button" value="4">4</button>
        <button onClick="yema(this);" name="page" class="three" type="button" value="5">5</button>
        <button onClick="yema(this);" name="page" class="three" type="button" value="6">6</button>
        <button name="dot" class="three" type="button" value="...">...</button>
        <button class="two" onClick="page_down();" type="button" value="page_down">></button>
        <!-- <button class="one"  type="button" value="last_page">></button> -->
    </div>
 */